import { createApp, reactive } from "vue";
import { extend } from "./basic.mjs";
import { useExpose } from "../composables/use-expose.mjs";

// 定义一个开关reactive open close toggle方法  专门给popup相关组件使用
function usePopupState() {
  const state = reactive({
    show: false
  });
  const toggle = (show) => {
    state.show = show;
  };
  // 调用open时可以将prop中数据合并state再打开
  const open = (props) => {
    // Object.assgin时添加更新的值是 响应式
    extend(state, props, { transitionAppear: true });
    toggle(true);
  };
  const close = () => toggle(false);
  // 暴露给外部使用
  useExpose({ open, close, toggle });
  return {
    open,
    close,
    state,
    toggle
  };
}

//vue2中通过以下方式创建应用并且挂载
//  new Vue({
//   render: h => Hh(App)
//  }).$mount('#qpp')
// 所有的挂载元素会被vue 生成的 Dom替换, 因此不推荐挂载root 实例到html或者body上
// RootComponent可以是 .vue单文件组件, 可以是组件对象

function mountComponent(RootComponent) {
  // createApp会创建一个应用实例
  // 应用实例可以use组件, 注册组件 注册自定义指令
  const app = createApp(RootComponent);
  const root = document.createElement("div");
  // 创建空dev元素直接添加到body下面, app.mount(root)时,root会被替换丢失, 故外层dev会自动去掉
  document.body.appendChild(root);
  return {
    // app.mount()返回的是组件实例, 不是应用实例
    instance: app.mount(root),
    unmount() {
      app.unmount();
      document.body.removeChild(root);
    }
  };
}
export {
  mountComponent,
  usePopupState
};
